<template>
     <n-message-provider>
    <!-- 使用flex-col并设置full height -->
    <div class="flex flex-col h-screen">
      <div v-show="!isFullscreen" class="flex flex-col md:flex-row flex-shrink-0 items-center w-auto">
        <n-menu v-model:value="activeKey" style="width:auto" mode="horizontal" :options="menuOptions" responsive />
        <div class="flex items-end gap-2 px-4 flex-1 justify-end">
          <!-- 删除:          <n-button @click="toggleSidebar" size="small" circle>
            <template #icon>
              <n-icon>
                <ChevronLeft24Regular v-if="isSidebarVisible" />
                <ChevronRight24Regular v-else />
              </n-icon>
            </template>
          </n-button> -->
          <UserInfo class="hidden md:block"/>
        </div>
      </div>
      <!-- 设置flex-1并使用overflow-auto处理内容溢出 -->
      <div class="py-4 md:px-8 flex-1 overflow-auto">
        <!-- <h1>PDF 阅读器</h1> -->
        <!-- <PdfReader />  -->
        <RouterView />
      </div>
    </div>
  </n-message-provider>
</template>
<script lang="ts" setup>
import { RouterLink } from 'vue-router';
import { h, ref, onMounted, onUnmounted } from 'vue'
import UserInfo from './user/UserInfo.vue';

const activeKey = ref('reader')

// 全屏模式状态
const isFullscreen = ref(false)

// 监听全屏模式切换事件
const handleFullscreenToggle = (event: any) => {
  isFullscreen.value = event.detail.isFullscreen
}

onMounted(() => {
  window.addEventListener('toggleFullscreen', handleFullscreenToggle)
})

onUnmounted(() => {
  window.removeEventListener('toggleFullscreen', handleFullscreenToggle)
})



const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'pdf'
          }
        },
        { default: () => '阅读器' }
      ),
    key: 'reader',
  },
   {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'report',

          }
        },
        { default: () => '报表' }
      ),
    key: 'report',
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'wordList',

          }
        },
        { default: () => '单词本' }
      ),
    key: 'wordList',
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'setting',

          }
        },
        { default: () => '设置' }
      ),
    key: 'setting',
  },
];
</script>

